<template>
    <EChart width="100%" height="600px" :options="options"/>
    <p>
        从系统性危机图中看出，大多数非洲国家曾经都发生过不只一次的系统性危机，由此可以看出他们的经济体系较为脆弱。
        从银行危机图中看出，非洲国家曾经都发生过银行业危机，从而导致国家经济起伏不定，政治经济不稳定。
    </p>
</template>
<script setup lang="ts">
import {getCountData} from '@/api/country';
import {EChartsOption} from 'echarts';
import EChart from "@/components/EChart";

const countData1 = getCountData('systemicCrisis', 1);
const countryArr: string[] = Object.keys(countData1);
const countArr: number[] = Object.values(countData1).map(item => item!['count']);
const countArr1: number[] = Object.values(getCountData('bankingCrisis', 'crisis')).map(item => item!['count']);
onMounted(() => {
    options.yAxis!['data'] = countryArr;
    options.series![0]['data'] = countArr;
    options.series![1]['data'] = countArr1;
});
const options = reactive<EChartsOption>({
    title: {
        text: '银行及系统危机',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
    },
    yAxis: {
        type: 'category',
        data: [],
    },
    series: [
        {
            name: '系统性危机',
            type: 'bar',
            data: [],
        },
        {
            name: '银行危机',
            type: 'bar',
            data: [],
        },
    ],
});
</script>
<style scoped>

</style>
